<template>
	<view>
		<!-- <Head>快速注册</Head> -->
		<view class="bx1"></view>
		<view class="bx2">
			<u-field placeholder-style="color:#757575;font-size:14px !important;" v-model="fullname" required label="姓名"
				placeholder="请填写" class="reset_after" :clearable="false" />
			<view class="sexIpt_box">
				<u-field :clearable="false" disabled required class="reset_after" name="sex" label="性别">
					<u-radio-group slot="right" v-model="sex" size="28rpx">
						<u-radio name="1">男</u-radio>
						<u-radio name="2">女</u-radio>
					</u-radio-group>
				</u-field>
			</view>
			<view class="form-line u-border-bottom" @click="showPickerBirthday = !showPickerBirthday">
				<view class="form-field">
					<view class="label">
						出生日期
					</view>
					<view :class="birthday ? 'text' : 'text ac'">
						{{birthday ? birthday : '请选择'}}
					</view>
				</view>
				<u-icon class="arrow-icon" name="arrow-right"></u-icon>
			</view>
			<u-picker v-model="showPickerBirthday" mode="time" title="选择出生日期" :params="params"
				@confirm="onConfirmBirthday" @cancel="showPickerBirthday = false" />
			<view class="form-line u-border-bottom" @click="showPickerEdu = !showPickerEdu">
				<view class="form-field">
					<view class="label">
						最高学历
					</view>
					<view :class="educationName ? 'text' : 'text ac'">
						{{educationName ? educationName : '请选择'}}
					</view>
				</view>
				<u-icon class="arrow-icon" name="arrow-right"></u-icon>
			</view>
			<u-picker mode="selector" v-model="showPickerEdu" :range="columnsEdu" range-key="text"
				@confirm="onConfirmEducation" @cancel="showPickerEdu = false" />
			<view class="form-line u-border-bottom" @click="showPickerEnterJob = !showPickerEnterJob">
				<view class="form-field">
					<view class="label">
						开始工作时间
					</view>
					<view :class="enter_job_time_name ? 'text' : 'text ac'">
						{{enter_job_time_name ? enter_job_time_name : '请选择'}}
					</view>
				</view>
				<u-icon class="arrow-icon" name="arrow-right"></u-icon>
			</view>
			<u-picker v-model="showPickerEnterJob" mode="time" :params="params" @confirm="onConfirmEnterJob"
				@cancel="showPickerEnterJob = false" />
			<u-field placeholder-style="color:#757575;font-size:14px !important;" required v-model="mobile" label="联系电话"
				placeholder="请填写联系电话" class="reset_after" :clearable="false" />
			<view class="for_btn">
				<view class="edit_phone" @click="sendSms" :style="'color:'+sendSmsBtnTextColor">{{ sendSmsBtnText }}
				</view>
			</view>
			<u-field placeholder-style="color:#757575;font-size:14px !important;" required v-model="code" label="验证码"
				placeholder="请输入验证码" class="reset_after" :clearable="false" />
			<u-field placeholder-style="color:#757575;font-size:14px !important;" required type="password"
				v-model="password" label="密码" placeholder="请输入密码" class="reset_after" :clearable="false" />
			<view class="form_split_10"></view>
			<view class="form-line u-border-bottom" @click="showPickerJobCategory = !showPickerJobCategory">
				<view class="form-field">
					<view class="label">
						期望职位
					</view>
					<view :class="categoryName ? 'text' : 'text ac'">
						{{categoryName ? categoryName : '请选择期望职位'}}
					</view>
				</view>
				<u-icon class="arrow-icon" name="arrow-right"></u-icon>
			</view>

			<u-popup v-model="showPickerJobCategory" mode="bottom" height="70%" width="100%" ref="dropCategory"
				@click-overlay="handleCategoryOverlay" @opened="openedCategory">
				<JobCategoryFilter :categories="[category1, category2, category3]" :type="false"
					@doSelect="doSelectCategory" :all="false"></JobCategoryFilter>
			</u-popup>
			<view class="form-line u-border-bottom" @click="showPickerDistrict = !showPickerDistrict">
				<view class="form-field">
					<view class="label">
						期望地区
					</view>
					<view :class="districtName ? 'text' : 'text ac'">
						{{districtName ? districtName : '请选择期望地区'}}
					</view>
				</view>
				<u-icon class="arrow-icon" name="arrow-right"></u-icon>
			</view>

			<u-popup v-model="showPickerDistrict" mode="bottom" height="900rpx" width="100%" ref="dropDistrict"
				@click-overlay="handleDistrictOverlay" @opened="openedDistrict">
				<DistrictFilter :districts="[district1, district2, district3]" :type="false"
					@doSelect="doSelectDistrict"></DistrictFilter>
			</u-popup>
			<view class="form-line u-border-bottom" @click="showPickerWage = !showPickerWage">
				<view class="form-field">
					<view class="label">
						期望薪资
					</view>
					<view :class="wageName ? 'text' : 'text ac'">
						{{wageName ? wageName : '请选择期望薪资'}}
					</view>
				</view>
				<u-icon class="arrow-icon" name="arrow-right"></u-icon>
			</view>

			<u-picker v-model="showPickerWage" mode="multiSelector" :range="columnsWage"
				:default-selector="wageDefaultIndexAry" @confirm="onConfirmWage" @columnchange="onChangeWage"
				@cancel="showPickerWage = false" />
			<view class="form-line u-border-bottom" @click="showPickerCurrent = !showPickerCurrent">
				<view class="form-field">
					<view class="label">
						求职状态
					</view>
					<view :class="currentName ? 'text' : 'text ac'">
						{{currentName ? currentName : '请选择求职状态'}}
					</view>
				</view>
				<u-icon class="arrow-icon" name="arrow-right"></u-icon>
			</view>

			<u-picker v-model="showPickerCurrent" mode="selector" :range="columnsCurrent" range-key="text"
				:default-selector="currentDefaultIndex" @confirm="onConfirmCurrent"
				@cancel="showPickerCurrent = false" />
			<view style="padding: 32rpx;">
				<u-button type="primary" shape="circle" @click="handleSubmit">
					立即投递
				</u-button>
			</view>
		</view>
		<Captcha ref="captcha"></Captcha>
		<u-popup width="100%" height="100%" v-model="showLogin" position="right" :overlay="false">
			<Login :utype="2" :single_login="true" @afterLogin="afterLogin" :goback_custom="true"
				@gobackCustomMethod="closeLogin"></Login>
		</u-popup>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-modal v-model="phoneModal" :content="phoneModalTipsText" confirm-text="是" :show-cancel-button="true"
			cancel-text="否" @confirm="handlePhoneYes" @cancel="phoneModal = false"></u-modal>
		<u-modal v-model="resumeModal" :content="resumeModalTipsText" confirm-text="继续完善" @confirm="handleResumeYes"
			@cancel="resumeModal = false"></u-modal>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	import Captcha from '@/components/captcha/index'
	import JobCategoryFilter from '@/components/JobCategoryFilter'
	import DistrictFilter from '@/components/DistrictFilter'
	import Login from '@/components/Login'
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'RegQuick',
		components: {
			Captcha,
			JobCategoryFilter,
			DistrictFilter,
			Login
		},
		data() {
			return {
				resumeModal: false,
				resumeModalTipsText: '',
				phoneModal: false,
				phoneModalTipsText: '',
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				fullname: '',
				sex: '1',
				birthday: '',
				education: '',
				educationName: '',
				mobile: '',
				enter_job_time: '',
				enter_job_time_name: '',
				showPickerEdu: false,
				showPickerBirthday: false,
				showPickerEnterJob: false,
				currentDateBirthday: '', // 出生日期默认值
				maxBirthdayDate: '',
				minDate: '',
				currentDateEnterJob: '',
				isNoJobTime: false,
				educationDefaultIndex: 0, // 学历默认下标
				code: '',
				password: '',
				regularMobile: /^13[0-9]{9}$|14[0-9]{9}$|15[0-9]{9}$|18[0-9]{9}$|17[0-9]{9}$|16[0-9]{9}$|19[0-9]{9}$/,
				showPickerWage: false,
				showPickerDistrict: false,
				showPickerJobCategory: false,
				district1: '',
				district2: '',
				district3: '',
				district: '',
				districtName: '',
				category1: '',
				category2: '',
				category3: '',
				categoryName: '',
				minwage: '',
				maxwage: '',
				wageName: '',
				current: '',
				currentName: '',
				showPickerCurrent: false,
				currentDefaultIndex: [0],
				wageStart: this.$store.state.minWage,
				wageDefaultIndexAry: [0, 0],
				doRegQuickBtnDisabled: false,
				id: 0,
				showLogin: false
			}
		},
		onLoad() {
			this.$store.dispatch('getClassify', 'education')
			this.$store.dispatch('getClassify', 'jobcategory')
			this.$store.dispatch('getClassify', 'citycategory')
			this.$store.dispatch('getClassifyWage')
			this.$store.dispatch('getClassify', 'current')
			this.id = this.$Route.query.id
			this.initDate()
		},
		mounted() {
			this.$store.commit('clearCountDownFun')
		},
		computed: {
			...mapState({
				sendSmsBtnText: state => state.sendSmsBtnText,
				sendSmsBtnTextColor: state => state.sendSmsBtnTextColor,
			}),
			columnsEdu() {
				return this.$store.state.classifyEdu
			},
			areaDistrict() {
				return this.$store.state.classifyCityCategory
			},
			columnsWage() {
				return [
					Object.keys(this.$store.state.classifyWage),
					this.$store.state.classifyWage[this.wageStart]
				]
			},
			columnsCurrent() {
				return this.$store.state.classifyCurrent
			}
		},
		methods: {
			closeLogin() {
				this.showLogin = false
			},
			// 登录成功之后做的操作
			afterLogin(data) {
				this.showLogin = false
				setTimeout(() => {
					uni.redirectTo({
						url: '/commonViews/JobShow?id=' + this.id
					})
				}, 300)
			},
			// 立即投递
			handleSubmit() {
				if (this.doRegQuickBtnDisabled === true) {
					return false
				}
				if (!this.fullname) {
					this.$refs.uTips.show({
						title: '请填写姓名',
						type: 'error'
					})
					return false
				}
				if (!this.sex) {
					this.$refs.uTips.show({
						title: '请选择性别',
						type: 'error'
					})
					return false
				}
				if (!this.birthday) {
					this.$refs.uTips.show({
						title: '请选择出生日期',
						type: 'error'
					})
					return false
				}
				if (!this.education) {
					this.$refs.uTips.show({
						title: '请选择学历',
						type: 'error'
					})
					return false
				}
				if (!this.isNoJobTime) {
					if (!this.enter_job_time) {
						this.$refs.uTips.show({
							title: '请选择开始工作时间',
							type: 'error'
						})
						return false
					}
				}
				if (!this.mobile) {
					this.$refs.uTips.show({
						title: '请填写联系电话',
						type: 'error'
					})
					return false
				}
				if (!this.regularMobile.test(this.mobile)) {
					this.$refs.uTips.show({
						title: '手机号格式不正确',
						type: 'error'
					})
					return false
				}
				if (!this.code) {
					this.$refs.uTips.show({
						title: '请填写验证码',
						type: 'error'
					})
					return false
				}
				if (!this.password) {
					this.$refs.uTips.show({
						title: '请填写密码',
						type: 'error'
					})
					return false
				}
				if (!this.category1) {
					this.$refs.uTips.show({
						title: '请选择期望职位',
						type: 'error'
					})
					return false
				}
				if (!this.district1) {
					this.$refs.uTips.show({
						title: '请选择期望地区',
						type: 'error'
					})
					return false
				}
				if (!this.minwage || !this.maxwage) {
					this.$refs.uTips.show({
						title: '请选择薪资',
						type: 'error'
					})
					return false
				}
				if (!this.current) {
					this.$refs.uTips.show({
						title: '请选择求职状态',
						type: 'error'
					})
					return false
				}
				this.doRegQuickBtnDisabled = true
				http.post(api.reg_resume_quick, {
					jobid: this.id,
					fullname: this.fullname,
					sex: this.sex,
					birthday: this.birthday,
					education: this.education,
					enter_job_time: this.enter_job_time,
					category1: this.category1,
					category2: this.category2,
					category3: this.category3,
					district1: this.district1,
					district2: this.district2,
					district3: this.district3,
					minwage: this.minwage,
					maxwage: this.maxwage,
					current: this.current,
					mobile: this.mobile,
					code: this.code,
					password: this.password
				}).then(res => {
					this.doRegQuickBtnDisabled = false
					if (parseInt(res.data.code) === 200) {
						// 设置登录状态
						this.$store.commit('setLoginState', {
							whether: true,
							utype: res.data.data.utype,
							token: res.data.data.token,
							mobile: res.data.data.mobile,
							userIminfo: res.data.data.user_iminfo
						})
						if (parseInt(res.data.data.next_code) === 50005) {
							// 去完善简历
							this.resumeModal = true
							this.resumeModalTipsText = res.data.message
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
							// 投递完成跳转到职位详情页
							setTimeout(() => {
								uni.redirectTo({
									url: '/commonViews/JobShow?id=' + this.id
								})
							}, 1000)
						}
					} else {
						this.$refs.uTips.show({
							title: res.data.message,
							type: 'error'
						})
					}
				}).catch(err => {
					this.doRegQuickBtnDisabled = false
					console.log(err)
				})
			},
			// 完善简历
			handleResumeYes() {
				uni.navigateTo({
					url: '/personal/EditResume'
				})
			},
			// 设置日期插件默认值
			initDate() {
				let nowDate = new Date()
				let nowYear = nowDate.getFullYear()
				let minYear = nowYear - 59
				this.minDate = new Date(minYear, 0)
				this.maxDate = nowDate
				this.currentDateBirthday = nowDate
				this.currentDateEnterJob = nowDate
				let minBirthdayYear = nowYear - 16
				this.maxBirthdayDate = new Date(minBirthdayYear, 11)
			},
			// 选择出生日期
			onConfirmBirthday(value) {
				this.birthday = value.year + '-' + value.month
				this.showPickerBirthday = !this.showPickerBirthday
			},
			// 选择最高学历
			onConfirmEducation(value) {
				let {
					id,
					text
				} = this.columnsEdu[value]
				this.education = id
				this.educationName = text
				this.showPickerEdu = !this.showPickerEdu
			},
			// 选择无工作经验
			handleNoJobTime() {
				this.enter_job_time = ''
				this.enter_job_time_name = '无工作经验'
				this.isNoJobTime = true
				this.showPickerEnterJob = !this.showPickerEnterJob
			},
			// 选择开始工作时间
			onConfirmEnterJob(value) {
				this.enter_job_time = value.year + '-' + value.month
				this.enter_job_time_name = value.year + '-' + value.month
				this.isNoJobTime = false
				this.showPickerEnterJob = !this.showPickerEnterJob
			},
			// 手机已注册 
			handlePhoneYes() {
				this.showLogin = true
			},
			// 发送验证码
			sendSms() {
				let _this = this
				if (this.$store.state.sendSmsBtnDisabled) {
					return false
				}
				if (!this.mobile) {
					// this.$notify('请输入手机号')
					this.$refs.uTips.show({
						title: '请输入手机号',
						type: 'error'
					})
					return false
				}
				if (!this.regularMobile.test(this.mobile)) {
					this.$refs.uTips.show({
						title: '手机号格式不正确',
						type: 'error'
					})
					return false
				}
				this.$refs.captcha.show(res => {
					this.$store
						.dispatch('sendSmsFun', {
							url: api.get_reg_resume_quick_code,
							mobile: this.mobile,
							type: 2,
							captcha: res
						})
						.then(response => {
							if (parseInt(response.code) === 200) {
								if (parseInt(response.data.notice) === 1) {
									_this.$store.commit('clearCountDownFun')
									// 手机号已注册
									_this.phoneModal = true
									_this.phoneModalTipsText = response.message
								} else {
									_this.$refs.uTips.show({
										title: _this.$store.state.sendSmsMessage,
										type: 'success'
									})
								}
							} else {
								_this.$refs.uTips.show({
									title: _this.$store.state.sendSmsMessage,
									type: 'error'
								})
							}
						})
				})
			},
			doSelectCategory(data) {
				this.category1 = data[0]
				this.category2 = data[1]
				this.category3 = data[2]
				this.categoryName = data[3]
				this.showPickerJobCategory = !this.showPickerJobCategory
			},
			doSelectDistrict(data) {
				this.district1 = data[0]
				this.district2 = data[1]
				this.district3 = data[2]
				this.districtName = data[3]
				this.showPickerDistrict = !this.showPickerDistrict
			},
			handleCategoryOverlay() {
				this.$refs.dropCategory.$children[0].handleSecondOverlay()
			},
			handleDistrictOverlay() {
				this.$refs.dropDistrict.$children[0].handleCityOverlay()
			},
			// 职位分类筛选打开之后给筛选组件赋值
			openedCategory() {
				this.$refs.dropCategory.$children[0].initData()
				setTimeout(() => {
					this.dynamicAssignFun(this.$refs.dropCategory)
				}, 300)
			},
			// 地区筛选打开之后给筛选组件赋值
			openedDistrict() {
				this.$refs.dropDistrict.$children[0].initData()
				setTimeout(() => {
					this.dynamicAssignFun(this.$refs.dropDistrict)
				}, 300)
			},
			// 动态赋值筛选组件公用方法
			dynamicAssignFun(obj) {
				let popHeight = obj.$el.clientHeight
				if (obj.$children[0]) {
					obj.$children[0].layHeight = popHeight
					let offTop = obj.$el.offsetTop
					obj.$children[0].offTop = parseInt(parseInt(offTop) + parseInt(popHeight) / 2)
				}
			},
			// 选择期望薪资
			onConfirmWage(values) {
				let [column1, column2] = values
				let [columnAry1, columnAry2] = this.columnsWage
				this.minwage = parseInt(columnAry1[column1])
				this.maxwage = parseInt(columnAry2[column2])
				this.wageName = `${parseInt(columnAry1[column1])}-${parseInt(columnAry2[column2])}元`
				this.showPickerWage = !this.showPickerWage
			},
			// 薪资级联
			onChangeWage(values) {
				let {
					column,
					index
				} = values
				this.$set(this.wageDefaultIndexAry, column, index)
				if (column == 0) {
					let values = parseInt(this.columnsWage[column][index])
					this.$set(this.columnsWage, 1, this.$store.state.classifyWage[values])
					this.$set(this.wageDefaultIndexAry, 1, 0)
					this.$forceUpdate();
				}
				// picker.setColumnValues(1, this.$store.state.classifyWage[values[0]])
			},
			// 选择求职状态
			onConfirmCurrent(value) {
				var obj = this.columnsCurrent[value[0]]
				this.current = obj.id
				this.currentName = obj.text
				this.showPickerCurrent = !this.showPickerCurrent
			},
			// 格式化日期
			dateFormat(time) {
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				return `${year}-${month}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sexIpt_box {
		/deep/ .fild-body {
			/deep/ .u-flex {
				flex: 0;
			}
		}
	}

	.bx1 {
		width: 100%;
		height: 360rpx;
		background: url(./static/img/reg_quick_bg.png);
		background-position: center 0;
		background-repeat: no-repeat;
		background-size: 750rpx 360rpx;
	}

	.bx2 {
		background-color: #f3f3f3;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 0;
			top: -32rpx;
			z-index: 1;
			width: 100%;
			height: 32rpx;
			background-color: #ffffff;
			border-radius: 40rpx 40rpx 0 0;
		}
	}

	.edit_phone {
		position: absolute;
		right: 0;
		top: -100rpx;
		font-size: 28rpx;
		padding: 0 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		z-index: 5;
	}
</style>
